<!--
 * @Author: C.
 * @Date: 2023-03-31 09:55:07
-->
<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter width="30%" @ok="handleSubmit">
    <template #title>
      {{ nodeContent.Name }}
      <Tag :color="auditSignEnum.getItem(nodeContent.ApproveType)?.color">
        {{ auditSignEnum.getLabel(nodeContent.ApproveType) }}</Tag
      >
    </template>
    <div
      v-for="item in nodeContent.ApproveNodeUsers"
      :key="item.Id"
      class="shadow rounded-md p-1 pr-2 pb-2 my-2 border"
    >
      <div class="user-msg">
        <div>
          <Avatar :size="35" style="background-color: #0960bd"> {{ item.UserId }} </Avatar>
        </div>
        <div class="user-msg-desc">
          <div class="user-msg-name flex justify-between w-full">
            <span>{{ item.UserName }}</span>
            <Button type="link" @click="urgeOnce" v-show="item.ApproveState == 'WaitToProcess'">
              催一下</Button
            >
          </div>
          <div class="user-msg-state">
            <Tag :color="auditEnum.getItem(item.ApproveState)?.color">{{
              auditEnum.getLabel(item.ApproveState)
            }}</Tag>
            <span style="font-weight: bold" v-if="item.ApprovedAt">{{
              dataHandle(item.ApprovedAt, 'time')
            }}</span>
          </div>
        </div>
      </div>

      <div class="auditor-remark" v-if="item.Remarks">
        {{ item.Remarks }}
        <div class="triangle"></div>
      </div>
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Tag, Avatar, Button } from 'ant-design-vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { INode } from './types';
  import auditEnum, { auditSignEnum } from '/@/maps/baseData/auditEnum';
  import { dataHandle } from '/~/utils/data/index';
  const emit = defineEmits(['success', 'register']);
  const nodeContent = ref<INode>({} as INode);
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    nodeContent.value = data.nodeContent;
    setDrawerProps({ confirmLoading: false });
  });

  async function handleSubmit() {
    try {
      setDrawerProps({ confirmLoading: true });
      // TODO custom api
      // console.log(nodeContent.value);

      closeDrawer();
      emit('success');
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }
  function urgeOnce() {}
</script>
<style lang="less" scoped>
  [data-theme='dark'] {
    .auditor-remark {
      // border: 2px solid transparent;
      background-color: @trigger-dark-bg-color;

      .triangle {
        border-color: transparent transparent @trigger-dark-bg-color transparent; /*1、下边框有颜色 对应着上边框没有宽度,是正三角形；2、上边框有颜色 对应着下边框没宽度，是倒三角形*/
      }
    }
  }

  .user-msg {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    &-desc {
      display: flex;
      flex: 1;
      align-items: flex-start;
      justify-content: center;
      flex-flow: column;
      margin-left: 15px;
    }

    &-name {
      font-size: 17px;
    }

    &-state {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .auditor-remark {
    margin-top: 5px;
    margin-left: 5px;
    padding: 5px;
    background-color: #f3f3f3;
    font-size: 15px;
    position: relative;
    border-radius: 5px;

    .triangle {
      width: 0;
      height: 0;
      border-color: transparent transparent #f3f3f3 transparent; /*1、下边框有颜色 对应着上边框没有宽度,是正三角形；2、上边框有颜色 对应着下边框没宽度，是倒三角形*/
      border-style: solid;
      border-width: 0 7px 10px 7px;
      position: absolute;
      top: -10px;
      left: 7px;
    }
  }
</style>
